<template>
  <a-row :gutter="[20, 20]">
    <a-col :span="24">
      <div class="u-flex u-row-between">
        <span class="u-page-title">角色管理</span>
        <a-button type="primary" @click="handleClickCreateRole"
          >新增角色</a-button
        >
      </div>
      <div class="u-m-t-20 u-table-repo">
        <a-form layout="vertical">
          <a-row justify="end" :gutter="[20, 20]">
            <a-col :span="6">
              <a-form-item label="">
                <a-input placeholder="请输入角色名称" allowClear />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <a-table :columns="__TABLE_COLUMNS__"></a-table>
      </div>
      <!-- role modal -->
      <role-modal
        v-model:visible="roleModalForm.show"
        :title="roleModalForm.title"
      />
    </a-col>
  </a-row>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import RoleModal from "@comps/role-modal/index.vue";
import RoleService from "@/service/role";

const __ACTION_TYPE__ = {
  CREATE: {
    value: "create",
    title: "新建角色",
  },
  DETAIL: {
    value: "detail",
    title: "",
  },
};

const __TABLE_COLUMNS__ = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id",
  },
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "权限",
    key: "permissions",
  },
  {
    title: "操作",
    key: "action",
  },
];

const roleModalForm = reactive({
  show: false,
  title: __ACTION_TYPE__.CREATE.title,
  actionType: __ACTION_TYPE__.CREATE.value,
});

const handleClickCreateRole = () => {
  roleModalForm.actionType = __ACTION_TYPE__.CREATE.value;
  roleModalForm.title = __ACTION_TYPE__.CREATE.title;

  roleModalForm.show = true;
};

const getAllRoles = () => {
  RoleService.getAllRoles().then((res) => {
    console.log(getAllRoles);
  });
};

const init = () => {
  getAllRoles();
};

init();
</script>
